<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVVM模型</title>
    <script type="application/javascript" src="../js/vue.js"></script>
</head>

<!--
MVVM模型:
    M:Model 模型层,对应data中的数据
    V:View 视图层,对应template
    VM:ViewModel 视图模型层,对应Vue实例

总结:
    1.data中所有的属性,最后都是要通过vm.属性名的方式,在View层进行展示的
    2.data中所有的属性,都可以通过vm.$data.属性名的方式,在ViewModel层进行修改的
-->
<div id="app5">
    <p>我的名字是{{name}}</p>
    <p>我住在{{address}}</p>
</div>

<body>

<script type="application/javascript">
    Vue.config.productionTip = false    // 阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: "#app5",
        data: {
            name: "张三",
            address: '北京'
        }
    })

    console.log(vm)
</script>

</body>
</html>
